<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="130px">
        <el-col :span="6">
          <el-form-item label="盖竹原水浊度" prop="mit101T">
            <el-input v-model="formData.mit101T" placeholder="请输入盖竹原水浊度" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="盖竹原水PH" prop="ait101Ph">
            <el-input v-model="formData.ait101Ph" placeholder="请输入盖竹原水PH" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="盖竹原水温度" prop="ait101T">
            <el-input v-model="formData.ait101T" placeholder="请输入盖竹原水温度" clearable :style="{width: '40%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高楼原水浊度" prop="jnyszd">
            <el-input v-model="formData.jnyszd" placeholder="请输入高楼原水浊度" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="高楼原水PH" prop="jnysph">
            <el-input v-model="formData.jnysph" placeholder="请输入高楼原水PH" clearable :style="{width: '25%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一期原进水流量" prop="yqJsll">
            <el-input v-model="formData.yqJsll" placeholder="请输入一期原进水流量" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="二期原进水流量" prop="fit102">
            <el-input v-model="formData.fit102" placeholder="请输入二期原进水流量" clearable :style="{width: '25%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一期石灰投加量" prop="shsjtjll4">
            <el-input v-model="formData.shsjtjll4" placeholder="请输入一期石灰投加量" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="二期石灰投加量" prop="shsjtjll2">
            <el-input v-model="formData.shsjtjll2" placeholder="请输入二期石灰投加量" clearable
                      :style="{width: '25%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="一期" prop="referenceType">
            <el-radio-group v-model="formData.referenceType" size="small">
              <el-radio-button v-for="(item, index) in referenceTypes" :key="index" :label="item.value"
                               :disabled="item.disabled">{{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二期" prop="field102">
            <el-radio-group v-model="formData.field102" size="small">
              <el-radio-button v-for="(item, index) in field102Options" :key="index" :label="item.value"
                               :disabled="item.disabled">{{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="1px" label="">
            <el-button type="primary" @click="showSearchModel" size="medium">一键读取</el-button>
            <el-button type="primary" plain size="medium" @click="handlePreconditions" icon="el-icon-setting">前置条件设置
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="查询间隔" prop="querySpace">
            <el-time-picker v-model="formData.querySpace" format="HH:mm:ss" value-format="HH:mm:ss"
                            :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '89%'}"
                            placeholder="请选择查询间隔" clearable></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="查询范围" prop="startDate">
            <el-date-picker
              v-model="formData.startDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="查询模式" prop="firstType">
            <el-radio-group @change="onSourceShow" v-model="formData.firstType" size="medium">
              <el-radio-button v-for="(item, index) in firstTypes" :key="index" :label="item.value"
                               :disabled="item.disabled">{{ item.label }}
              </el-radio-button>
            </el-radio-group>
            <!--            <el-button type="primary" title="设置沉淀水浊度目标值" plain size="medium" icon="el-icon-warning-outline"
                                   @click="handleNtu"></el-button>-->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <el-button type="primary" size="medium" style="color: red" @click="handleFirstModel">启动/暂停</el-button>
            <el-button type="primary" plain size="medium" @click="handleSource">数据来源</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="col-yq1" v-loading="loading">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-button type="primary" :style="{width:'100%'}" size="medium">一期</el-button>
            </el-col>
            <el-row v-show="sourceShow">
              <el-col :span="6">
                <p>投加量(min)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowMin }}</p>
              </el-col>
              <el-col :span="6">
                <p>投加量(avg)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowAvg }}</p>
              </el-col>
              <el-col :span="6">
                <p>投加量(max)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowMax }}</p>
              </el-col>
              <el-col :span="6">
                <p>实际投加量&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShow }}</p>
              </el-col>
            </el-row>
            <el-row v-show="!sourceShow">
              <el-col :span="8">
                <p>投加量(min)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowMin }}</p>
              </el-col>
              <el-col :span="8">
                <p>投加量(avg)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowAvg }}</p>
              </el-col>
              <el-col :span="8">
                <p>投加量(max)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ yqSourceVos.yqTjlShowMax }}</p>
              </el-col>
            </el-row>
            <el-col :span="6">
              <p>原水流量低限</p>
              <p>{{ yqSourceVos.yqJsllMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水流量高限</p>
              <p>{{ yqSourceVos.yqJsllMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水浊度低限</p>
              <p>{{ yqSourceVos.yqZdMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水浊度高限</p>
              <p>{{ yqSourceVos.yqZdMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水PH低限</p>
              <p>{{ yqSourceVos.yqPhMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水PH高限</p>
              <p>{{ yqSourceVos.yqPhMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>石灰投加量低限</p>
              <p>{{ yqSourceVos.shsjtjll4Min }}</p>
            </el-col>
            <el-col :span="6">
              <p>石灰投加量高限</p>
              <p>{{ yqSourceVos.shsjtjll4Max }}</p>
            </el-col>
            <el-col :span="12">
              <p>沉淀后浊度低限</p>
              <p>{{ yqSourceVos.ditt11Min }}</p>
            </el-col>
            <el-col :span="12">
              <p>沉淀后浊度高限</p>
              <p>{{ yqSourceVos.ditt11Max }}</p>
            </el-col>
            <el-col :span="12">
              <p>起始日期</p>
              <p>{{ yqSourceVos.endTime }}</p>
            </el-col>
            <el-col :span="12">
              <p>终止日期</p>
              <p>{{ yqSourceVos.startTime }}</p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="9" class="col-yq2" v-loading="loading">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-button type="primary" :style="{width:'100%'}" size="medium"> 二期</el-button>
            </el-col>
            <el-row v-show="sourceShow">
              <el-col :span="6">
                <p>投加量(min)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowMin }}</p>
              </el-col>
              <el-col :span="6">
                <p>投加量(avg)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowAvg }}</p>
              </el-col>
              <el-col :span="6">
                <p>投加量(max)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowMax }}</p>
              </el-col>
              <el-col :span="6">
                <p>实际投加量&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShow }}</p>
              </el-col>
            </el-row>
            <el-row v-show="!sourceShow">
              <el-col :span="8">
                <p>投加量(min)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowMin }}</p>
              </el-col>
              <el-col :span="8">
                <p>投加量(avg)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowAvg }}</p>
              </el-col>
              <el-col :span="8">
                <p>投加量(max)&nbsp;&nbsp;<span style="font-size: 12px">KG/KT</span></p>
                <p>{{ eqSourceVos.eqTjlShowMax }}</p>
              </el-col>
            </el-row>
            <el-col :span="6">
              <p>原水流量低限</p>
              <p>{{ eqSourceVos.fit102Min }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水流量高限</p>
              <p>{{ eqSourceVos.fit102Max }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水浊度低限</p>
              <p>{{ eqSourceVos.eqZdMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水浊度高限</p>
              <p>{{ eqSourceVos.eqZdMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水PH低限</p>
              <p>{{ eqSourceVos.eqPhMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>原水PH高限</p>
              <p>{{ eqSourceVos.eqPhMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>石灰投加量低限</p>
              <p>{{ eqSourceVos.shsjtjll2Min }}</p>
            </el-col>
            <el-col :span="6">
              <p>石灰投加量高限</p>
              <p>{{ eqSourceVos.shsjtjll2Max }}</p>
            </el-col>
            <el-col :span="6">
              <p>1#沉淀后浊度低限</p>
              <p>{{ eqSourceVos.cdc1ZdZMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>1#沉淀后浊度高限</p>
              <p>{{ eqSourceVos.cdc1ZdZMax }}</p>
            </el-col>
            <el-col :span="6">
              <p>2#沉淀后浊度低限</p>
              <p>{{ eqSourceVos.cdc2ZdZMin }}</p>
            </el-col>
            <el-col :span="6">
              <p>2#沉淀后浊度高限</p>
              <p>{{ eqSourceVos.cdc2ZdZMax }}</p>
            </el-col>
            <el-col :span="12">
              <p>起始日期</p>
              <p>{{ eqSourceVos.endTime }}</p>
            </el-col>
            <el-col :span="12">
              <p>终止日期</p>
              <p>{{ eqSourceVos.startTime }}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>

    <!-- 前置条件弹窗 -->
    <el-dialog :title="title" center :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="frontList" label-width="130px">
        <div style="margin: 0 0 20px 38px; color: red">允许偏差（±）</div>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="一期进水流量" prop="yqSsllTerm" label-width="150px">
              <el-input v-model="frontList.yqSsllTerm" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">m³/h</template>
              </el-input>
              <el-checkbox v-model="frontList.yqSsllTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高楼原水浊度" prop="jnyszdTerm" label-width="150px">
              <el-input v-model="frontList.jnyszdTerm" clearable :style="{width: '90%'}"
                        type="number"
                        oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');if(value>100)value=100;if(value<0)value=null;if(value<0)value=null;if((value[0] == 0 && value[1] > 0) || value == '00')value=value.slice(1);">
                <template slot="append">%</template>
              </el-input>
              <el-checkbox v-model="frontList.jnyszdTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二期进水流量" prop="fit102Term" label-width="150px">
              <el-input v-model="frontList.fit102Term" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">m³/h</template>
              </el-input>
              <el-checkbox v-model="frontList.fit102TermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盖竹原水浊度" prop="mit101TTerm" label-width="150px">
              <el-input v-model="frontList.mit101TTerm" clearable :style="{width: '90%'}"
                        type="number"
                        oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');if(value>100)value=100;if(value<0)value=null;if(value<0)value=null;if((value[0] == 0 && value[1] > 0) || value == '00')value=value.slice(1);">
                <template slot="append">%</template>
              </el-input>
              <el-checkbox v-model="frontList.mit101TTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一期石灰投加量" prop="shsjtjll4Term" label-width="150px">
              <el-input v-model="frontList.shsjtjll4Term" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">㎏/kt</template>
              </el-input>
              <el-checkbox v-model="frontList.shsjtjll4TermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盖竹原水温度" prop="ait101TTerm" label-width="150px">
              <el-input v-model="frontList.ait101TTerm" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">℃</template>
              </el-input>
              <el-checkbox v-model="frontList.ait101TTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二期石灰投加量" prop="shsjtjll2Term" label-width="150px">
              <el-input v-model="frontList.shsjtjll2Term" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">㎏/kt</template>
              </el-input>
              <el-checkbox v-model="frontList.shsjtjll2TermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高楼原水PH" prop="jnysphTerm" label-width="150px">
              <el-input v-model="frontList.jnysphTerm" clearable :style="{width: '90%'}"
                        type="number">
              </el-input>
              <el-checkbox v-model="frontList.jnysphTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一期沉淀池浊度高限" prop="targetZdYqTerm" label-width="150px">
              <el-input v-model="frontList.targetZdYqTerm" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">NTU</template>
              </el-input>
              <el-checkbox v-model="frontList.targetZdYqTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盖竹原水PH" prop="ait101PhTerm" label-width="150px">
              <el-input v-model="frontList.ait101PhTerm" clearable :style="{width: '90%'}"
                        type="number">
              </el-input>
              <el-checkbox v-model="frontList.ait101PhTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二期沉淀池浊度高限" prop="targetZdEqTerm" label-width="150px">
              <el-input v-model="frontList.targetZdEqTerm" clearable :style="{width: '90%'}"
                        type="number">
                <template slot="append">NTU</template>
              </el-input>
              <el-checkbox v-model="frontList.targetZdEqTermShow"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitArmFrontTerm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 数据来源弹窗 -->
    <el-dialog :title="title" center :visible.sync="openSource" width="1220px" append-to-body
               :close-on-click-modal='false' v-dialogDrag>
      <el-radio-group @click.native="handleRadioChangeClick" v-model="sourceList.changeByData" size="medium">
        <el-radio-button v-for="(item, index) in oneOrTwoChange" :key="index" :label="item.value"
                         :disabled="item.disabled">{{ item.label }}
        </el-radio-button>
      </el-radio-group>
      <el-table stripe height="500" v-show="oneORTwoShow" :data="sourceListByYq">
        <el-table-column align="center" type="index" width="50"/>
        <el-table-column v-if="oneORTwoShowGz" align="center" label="盖竹浊度"
                         prop="mit101T" width="100"/>
        <el-table-column v-if="oneORTwoShowGz" align="center" label="盖竹PH"
                         prop="ait101Ph" width="100"/>
        <el-table-column v-if="oneORTwoShowGz" align="center" label="盖竹温度"
                         prop="ait101T" width="100"/>
        <el-table-column v-if="oneORTwoShowGl" align="center" label="高楼浊度"
                         prop="jnyszd" width="100"/>
        <el-table-column v-if="oneORTwoShowGl" align="center" label="高楼PH"
                         prop="jnysph" width="100"/>
        <el-table-column align="center" label="进水量" prop="yqJsll"
                         width="100"/>
        <el-table-column align="center" label="加药流量" prop="yqJySsll"
                         width="100"/>
        <el-table-column align="center" label="加药投加量" prop="yqTjlShow"
                         width="100"/>
        <el-table-column align="center" label="石灰投加量" prop="shsjtjll4"
                         width="100"/>
        <el-table-column align="center" label="沉淀后浊度" prop="ditt11"
                         width="100"/>
        <el-table-column align="center" label="记录时间" prop="dateTime"
                         width="180"/>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="deleteHandleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table stripe height="500" v-show="!oneORTwoShow" :data="sourceListByEq">
        <el-table-column align="center" type="index" width="50"/>
        <el-table-column align="center" label="盖竹浊度" prop="mit101T"
                         width="90"/>
        <el-table-column align="center" label="盖竹PH" prop="ait101Ph"
                         width="90"/>
        <el-table-column align="center" label="盖竹温度" prop="ait101T"
                         width="90"/>
        <el-table-column align="center" label="进水量" prop="fit102"
                         width="90"/>
        <el-table-column align="center" label="加药流量" prop="eqJySsll"
                         width="90"/>
        <el-table-column align="center" label="加药投加量" prop="eqTjlShow"
                         width="90"/>
        <el-table-column align="center" label="石灰投加量" prop="shsjtjll2"
                         width="90"/>
        <el-table-column align="center" label="1#沉淀后浊度" prop="cdc1ZdZ"
                         width="100"/>
        <el-table-column align="center" label="2#沉淀后浊度" prop="cdc2ZdZ"
                         width="100"/>
        <el-table-column align="center" label="记录时间" prop="dateTime"
                         width="180"/>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="deleteHandleClick(scope.row)" type="text" size="small">剔除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="medium"
        @click="handleExportYq"
      >导出一期
      </el-button>
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="medium"
        @click="handleExportEq"
      >导出二期
      </el-button>
    </el-dialog>

    <!-- 设置沉淀水浊度弹窗 -->
    <!--    <el-dialog :title="title" center :visible.sync="openNtu" width="400px" append-to-body>
          <el-input v-model="formData.targetZd" clearable :style="{width: '100%'}" placeholder="请输入"/>
        </el-dialog>-->
  </div>
</template>
<script>
import {queryModel, selectArmFrontTerm, updateArmFrontTerm, selectRead, delRaBase} from "@/api/system/real";

export default {
  components: {},
  props: [],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '五年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 5);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '三年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '两年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365 * 2);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 显示一期/二期模块
      sourceShow: true,
      // 遮罩层
      loading: false,
      // 前置条件设置弹窗
      open: false,
      // 数据来源弹窗
      openSource: false,
      // 浊度设置弹窗
      // openNtu: false,
      // 弹出层标题
      title: "",
      // 前置条件设置弹窗表单参数
      form: {},
      // 数据来源表单参数
      sourceList: {
        // 数据来源切换
        changeByData: 1
      },
      // 数据来源一期数据列表
      sourceListByYq: [{
        mit101T: null,
        ait101Ph: null,
        ait101T: null,
        jnyszd: null,
        jnysph: null,
        yqJsll: null,
        yqJySsll: null,
        yqTjlShow: null,
        shsjtjll4: null,
        ditt11: null,
        dateTime: null,
        fit102: null,
        eqJySsll: null,
        eqTjlShow: null,
        shsjtjll2: null,
        cdc1ZdZ: null,
        cdc2ZdZ: null
      }],
      sourceListByEq: [{
        mit101T: null,
        ait101Ph: null,
        ait101T: null,
        fit102: null,
        shsjtjll2: null,
        eqJySsll: null,
        eqTjlShow: null,
        cdc1ZdZ: null,
        cdc2ZdZ: null,
        dateTime: null
      }],
      yqSourceVos: [{
        yqTjlShowMax: null,
        yqTjlShowMin: null,
        yqTjlShowAvg: null,
        yqJsllMax: null,
        yqJsllMin: null,
        yqZdMax: null,
        yqZdMin: null,
        yqPhMax: null,
        yqPhMin: null,
        shsjtjll4Max: null,
        shsjtjll4Min: null,
        startTime: null,
        endTime: null,
        ditt11Max: null,
        ditt11Min: null,
        cdc1ZdZMin: null,
        cdc1ZdZMax: null,
        cdc2ZdZMin: null,
        cdc2ZdZMax: null
      }],
      eqSourceVos: [{
        eqTjlShowMax: null,
        eqTjlShowMin: null,
        eqTjlShowAvg: null,
        fit102Max: null,
        fit102Min: null,
        eqZdMax: null,
        eqZdMin: null,
        eqPhMax: null,
        eqPhMin: null,
        shsjtjll2Max: null,
        shsjtjll2Min: null,
        startTime: null,
        endTime: null
      }],
      // 前置条件设置弹窗表单参数
      frontList: {
        yqSsllTerm: null,
        yqSsllTermShow: null,
        fit102Term: null,
        fit102TermShow: null,
        jnyszdTerm: null,
        jnyszdTermShow: null,
        jnysphTerm: null,
        jnysphTermShow: null,
        mit101TTerm: null,
        mit101TTermShow: null,
        ait101PhTerm: null,
        ait101PhTermShow: null,
        ait101TTerm: null,
        ait101TTermShow: null,
        shsjtjll4Term: null,
        shsjtjll4TermShow: null,
        shsjtjll2Term: null,
        shsjtjll2TermShow: null,
        targetZdYqTerm: null,
        targetZdYqTermShow: null,
        targetZdEqTerm: null,
        targetZdEqTermShow: null
      },
      // 数据来源  一期/二期
      oneORTwoShow: true,
      // 数据来源  盖竹
      oneORTwoShowGz: true,
      // 数据来源  高楼
      oneORTwoShowGl: true,
      formData: {
        mit101T: undefined,
        ait101Ph: undefined,
        ait101T: undefined,
        jnyszd: undefined,
        jnysph: undefined,
        yqJsll: undefined,
        fit102: undefined,
        shsjtjll4: undefined,
        shsjtjll2: undefined,
        referenceType: 1,
        field102: 1,
        startDate: [this.defaultStartDate(), new Date()],
        valueTime: '',
        querySpace: '03:00:00',
        firstType: 1,
        // targetZd: undefined,
      },
      referenceTypes: [{
        "label": "参考盖竹浊度投加",
        "value": 1
      }, {
        "label": "参考高楼浊度投加",
        "value": 2
      }],
      field102Options: [{
        "label": "参考盖竹浊度投加",
        "value": 1
      }],
      firstTypes: [{
        "label": "效果优先查询",
        "value": 1
      }, {
        "label": "能耗优先查询",
        "value": 2
      }],
      oneOrTwoChange: [{
        "label": "一期",
        "value": 1
      }, {
        "label": "二期",
        "value": 2
      }],
      startTime: null,
      endTime: null
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleRadioChangeClick() {
      if (this.sourceList.changeByData === 1) {
        this.oneORTwoShow = false;
      }
      if (this.sourceList.changeByData === 2) {
        this.oneORTwoShow = true;
      }
    },
    /** 设置前置条件弹窗 */
    handlePreconditions() {
      this.open = true;
      this.title = "查询系统参数设置";
      selectArmFrontTerm().then(response => {
          this.frontList = response.data;
        }
      );
    },
    /** 数据来源弹窗 */
    handleSource() {
      // 选择参考盖竹
      if (this.formData.referenceType === 1) {
        this.oneORTwoShowGz = true;
        this.oneORTwoShowGl = false;
      } else {
        // 参考高楼
        this.oneORTwoShowGz = false;
        this.oneORTwoShowGl = true;
      }
      this.openSource = true;
      this.title = "数据来源";
    },
    /** 浊度目标值设置弹窗 */
    /*handleNtu() {
      this.openNtu = true;
      this.title = "沉淀水浊度目标值";
    },*/
    // 表单重置
    reset() {
      this.form = {
        // 清空弹窗的数据
        // todo
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    submitArmFrontTerm() {
      updateArmFrontTerm(this.frontList).then((response) => {
        this.$modal.msgSuccess("前置条件设置成功");
      });
      this.open = false;
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // 一键读取
    showSearchModel() {
      selectRead().then(response => {
          this.formData.mit101T = response.data.mit101T;
          this.formData.ait101Ph = response.data.ait101Ph;
          this.formData.ait101T = response.data.ait101T;
          this.formData.jnyszd = response.data.jnyszd;
          this.formData.jnysph = response.data.jnysph;
          this.formData.yqJsll = response.data.yqJsll;
          this.formData.fit102 = response.data.fit102;
          this.formData.shsjtjll4 = response.data.shsjtjll4;
          this.formData.shsjtjll2 = response.data.shsjtjll2;
        }
      );
    },
    onSourceShow() {
      if (this.formData.firstType === 1) {
        this.sourceShow = true;
      } else {
        this.sourceShow = false;
      }
    },
    handleFirstModel() {
      this.loading = true;
      // 人工查询
      // 盖竹
      if (!this.formData.mit101T || !this.formData.ait101Ph || !this.formData.ait101T) {
        this.$message.warning('请输入完整盖竹参数！')
        this.loading = false;
        return
      }
      // 一期参考高楼
      if (this.formData.referenceType === 2) {
        if (!this.formData.jnyszd || !this.formData.jnysph) {
          this.$message.warning('请输入完整高楼参数！')
          this.loading = false;
          return
        }
      }
      // 原水流量
      if (!this.formData.yqJsll || !this.formData.fit102) {
        this.$message.warning('请输入完整原水进水量！')
        this.loading = false;
        return
      }
      // 一期二期石灰投加量
      if (!this.formData.shsjtjll4 || !this.formData.shsjtjll2) {
        this.$message.warning('请输入完整石灰投加量！')
        this.loading = false;
        return
      }
      // 查询间隔
      const parts = this.formData.querySpace.split(':').map(Number);
      const timestamp = (parts[0] * 3600) + (parts[1] * 60) + parts[2];
      if (timestamp === 0) {
        this.$message.warning('请选择查询间隔！')
        this.loading = false;
        return
      }
      // 查询模式
      if (!this.formData.firstType) {
        this.$message.warning('请选择查询模式！')
        this.loading = false;
        return
      }
      queryModel(this.formData).then((response) => {
        if (response.code === 200) {
          this.sourceListByYq = response.data['raBaseByYqVos'];
          this.sourceListByEq = response.data['raBaseByEqVos'];
          this.yqSourceVos = response.data['yqSourceVos'];
          this.eqSourceVos = response.data['eqSourceVos'];
          this.loading = false;
        } else {
          this.sourceListByYq = null;
          this.sourceListByEq = null;
          this.yqSourceVos = null;
          this.eqSourceVos = null;
        }
        this.$modal.msgSuccess(response.msg);
      });
    },
    tableHeaderStyle({row, column, rowIndex, columnIndex}) {
      return 'background-color:#1989fa;color:#fff;font-weight:400;'
    },
    defaultStartDate() {
      const now = new Date();
      return new Date(now.setFullYear(now.getFullYear() - 3));
    },
    /** 导出按钮操作 */
    handleExportYq() {
      // 要导出的json数据
      const jsonData = this.sourceListByYq;
      console.log(jsonData)
      let Newarry = [];
      if (this.oneORTwoShowGz) {
        Newarry = ["盖竹浊度", "盖竹PH", "盖竹温度", "进水量", "加药流量", "加药投加量", "石灰投加量", "沉淀后浊度", "记录时间"];
      } else {
        Newarry = ["高楼浊度", "高楼PH", "进水量", "加药流量", "加药投加量", "石灰投加量", "沉淀后浊度", "记录时间"];
      }
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = Newarry.join(",") + '\n'; //使用 \n 换行
      // 增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsonData.length; i++) {
        for (const key in jsonData[i]) {
          if (this.oneORTwoShowGz && (key === 'jnyszd' || key === 'jnysph')) {
            continue;
          }
          if (this.oneORTwoShowGl && (key === 'mit101T' || key === 'ait101Ph' || key === 'ait101T')) {
            continue;
          }
          str += `${jsonData[i][key] + '\t'},`;
        }
        str += '\n';
      }
      str += '\n';
      str += '最佳投加量' + this.yqSourceVos.yqTjlShowAvg;
      // encodeURIComponent解决中文乱码
      const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement("a");
      link.href = uri;
      // 对下载的文件命名
      link.download = "一期数据来源.csv";
      link.click();
    }, /** 导出按钮操作 */
    handleExportEq() {
      // 要导出的json数据
      const jsonData = this.sourceListByEq;
      const Newarry = ["盖竹浊度", "盖竹PH", "盖竹温度", "进水量", "加药流量", "加药投加量", "石灰投加量", "1#沉淀后浊度", "2#沉淀后浊度", "记录时间"];
      // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = Newarry.join(",") + '\n'; //使用 \n 换行
      // 增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsonData.length; i++) {
        for (const key in jsonData[i]) {
          str += `${jsonData[i][key] + '\t'},`;
        }
        str += '\n';
      }
      str += '\n';
      str += '最佳投加量' + this.eqSourceVos.eqTjlShowAvg;
      // encodeURIComponent解决中文乱码
      const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      // 通过创建a标签实现
      const link = document.createElement("a");
      link.href = uri;
      // 对下载的文件命名
      link.download = "二期数据来源.csv";
      link.click();
    },
    deleteHandleClick(row) {
      const id = row.id;
      console.log(id);
      const sourceListByYq = this.sourceListByYq;
      const sourceListByEq = this.sourceListByEq;
      this.$modal.confirm('是否确认剔除此数据项？').then(function() {
        return delRaBase(id);
      }).then(() => {
        // 删除ID为2的对象
        let indexYq = sourceListByYq.findIndex(item => item.id === id);
        if (indexYq !== -1) {
          sourceListByYq.splice(indexYq, 1);
        }
        let indexEq = sourceListByEq.findIndex(item => item.id === id);
        if (indexEq !== -1) {
          sourceListByEq.splice(indexEq, 1);
        }
        this.$modal.msgSuccess("剔除成功");
      }).catch(() => {});
    }
  }
}

</script>
<style>
p {
  text-align: center;
}

.el-form-item {
  margin-bottom: 10px;
}

.col-yq1 {
  background-color: #f1eeee;
  margin-left: 10px;
}

.col-yq2 {
  background-color: #f1eeee;
  margin-left: 10px;
}

.el-checkbox__inner {
  width: 16px; /* 设置选择框的宽度 */
  height: 16px; /* 设置选择框的高度 */
}

</style>
